<template>
 <div class="home">
   <div class="header">
     <div class="h1">
      <img src="./assets/logo_1.png" alt="">
       <span>Etrip-UI</span>
     </div>
     <p>行啊H5 移动端Vue组件库</p>
   </div>
   <div class="wrapper">
     <div v-for="item in element" :key="item.label">
       <p>{{item.label}}</p>
       <template v-for="data in item.lists" :key="data.name">
         <div @click="link(data.name)" class="button">{{ data.text}}</div>
       </template>
     </div>
     
   </div>
 </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const useRoute = useRouter()

const element = ref([])
element.value = [
  {
    label: '基础组件',
    lists: [
      {
        text: 'Cell 单元格',
        name: 'Cell'
      },
      {
        text: 'Toast 轻提示',
        name: 'Toast'
      },
      {
        text: 'Indicator 加载层',
        name: 'Indicator'
      },
      {
        text: 'Loading 加载图标',
        name: 'Loading'
      },
      {
        text: 'Popup 弹出层',
        name: 'Popup'
      },
      {
        text: 'Overlay 遮罩层',
        name: 'Overlay'
      },
      {
        text: 'Button 按钮',
        name: 'Button'
      }
    ]
  },
  {
    label: '表单组件',
    lists: [
      {
        text: 'Checkbox 复选框',
        name: 'Checkbox'
      },
      {
        text: 'Calendar 日历',
        name: 'Calendar'
      },
      {
        text: 'Picker 选择器',
        name: 'Picker'
      },
      {
        text: 'DatePicker 日期选择',
        name: 'DatePicker'
      },
      {
        text: 'Field 输入框',
        name: 'Field'
      },
      {
        text: 'Uploader 文件上传',
        name: 'Uploader'
      },
      {
        text: 'ImagePreview 图片预览',
        name: 'ImagePreview'
      }
    ]
  },
  {
    label: '反馈组件',
    lists: [
      {
        text: 'PullRefresh 下拉刷新',
        name: 'PullRefresh'
      },
      {
        text: 'Dialog 弹出框',
        name: 'Dialog'
      },
      {
        text: 'RadioList 单选框列表',
        name: 'RadioList'
      }
    ]
  },
  {
    label: '展示组件',
    lists: [
      {
        text: 'List 列表',
        name: 'List'
      },
      {
        text: 'Slider 进度条',
        name: 'Slider'
      },
      {
        text: 'Swipe 轮播图',
        name: 'Swipe'
      },
    ]
  },
  {
    label: '导航组件',
    lists: [
      {
        text: 'NavBar 导航栏',
        name: 'NavBar'
      },
      {
        text: 'TreeSelect 分类选择',
        name: 'TreeSelect'
      },
      {
        text: 'DateNav 日期选择',
        name: 'DateNav'
      }
    ]
  }
]
const link = (name) => {
  useRoute.push({name: name})
}
</script>

<style scoped lang="scss">
.home {
  background-color: #fff;
  padding: 20px;
}
.header {
  .h1 {
    display: flex;
    align-items: center;
    img {
      width: 100px;
    }
    span {
      font-size: 30px;
    }
  }
  p {
    margin-top: 10px;
    padding: 0 20px;
    color: rgba(69,90,100,.6);
    font-size: 14px;
  }
}
.wrapper {
  margin-top: 50px;
  padding: 0 5px;
  // padding: 0 25px;
  p {
    margin: 20px 0 10px 0;
    padding: 0 15px;
    color: rgba(69,90,100,.6);
    font-size: 14px;
  }
  .button {
    margin-top: 15px;
    padding: 0 15px;
    line-height: 35px;
    border-radius: 20px;
    background-color: #f7f8fa;
    font-size: 14px;
  }
}

</style>